/**
initialState 参数只会在组件的初始渲染中起作用(如果是个函数的话),后续渲染时会被忽略
+ 如果初始 state 需要通过复杂计算获得，则可以传入一个函数，在函数中计算并返回初始的 state，此函数只在初始渲染时被调用
+ 和this.state不同,它可以是一个基本数据类型而不强制要求其为一个对象

与 class 组件中的 setState 方法不同，useState 不会自动合并更新对象。你可以用函数式的 setState 结合展开运算符来达到合并更新对象的效果

跟类组件setState不同,这里的状态不会自动合并,更新的时候要传入完整的值
*/
import React, {useState} from 'react';

export default ()=>{
  const [state, setState] = useState(function () {
    console.log('计算初始状态'); //只会打印一次
    return {number: 0, name: '计数器'}
  });

  return (
    <div>
      除了第一次,会发现state.name丢失了
      <p>{state.name}:{state.number}</p>
      <button onClick={()=>setState(
        //@ts-ignore
        {number:state.number+1})}>+</button>
    </div>
  )
}


/*
function Table(props) {
  // ⚠️ createRows() is called on every render
  const [rows, setRows] = useState(createRows(props.count));
  // ...
}
*/
/** 正确的写法↓*/
/*
function Table(props) {
  // ✅ createRows() is only called once
  const [rows, setRows] = useState(() => createRows(props.count));
  // ...
}
*/
